<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>

<!DOCTYPE html>
<html>
<head>
	<meta charset="ISO-8859-1">

	<link rel="stylesheet" href="<c:url value="resources/bootstrap/css/bootstrap.css"/>" />
	<link rel="stylesheet" href="<c:url value="resources/bootstrap/css/bootstrapValidator.css"/>" />

	<script type="text/javascript" src="<c:url value="resources/bootstrap/js/jquery-1.10.2.min.js"/>"></script>
	<script type="text/javascript" src="<c:url value="resources/bootstrap/js/bootstrap.min.js"/>"></script>
	<script type="text/javascript" src="<c:url value="resources/bootstrap/js/bootstrapValidator.js"/>"></script>
	<title>Change Password</title>
</head>

<body>
	<div class="container">
		<fieldset>
		<form id="changePasswordForm" class="form-horizontal">
			<h2>Change Password</h2>
			<div class="control-group">
				<label class="control-label col-lg-3">Old Password</label>
				<div class="controls">
					<div class="col-lg-7">
						<input type="password" class="form-control" name="oldPassword" required/>
					</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label col-lg-3">Password</label>
				<div class="controls">
					<div class="col-lg-7">
						<input type="password" class="form-control" name="password" required/>
					</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label col-lg-3">Retype password</label>
				<div class="controls">
					<div class="col-lg-7">
						<input type="password" class="form-control" name="confirmPassword" required/>
					</div>
				</div>
			</div>
			<div class="control-group">
				<div class="controls">
					<label class="control-label col-lg-3"></label>
					<div class="col-lg-7">
						<button type="submit" class="btn btn-primary">Change Password</button>		
					</div>
				</div>
			</div>
			
			

		</form>
		</fieldset>
	</div>

	<script type="text/javascript">
	$(document).ready(function() {
		$('#changePasswordForm').bootstrapValidator({
			feedbackIcons: {
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			fields: {
				password: {
					validators: {
						identical: {
							field: 'confirmPassword',
							message: 'The password and its confirm are not the same'
						}
					}
				},
				confirmPassword: {
					validators: {
						identical: {
							field: 'password',
							message: 'The password and its confirm are not the same'
						}
					}
				}
			}
		});
	});
	</script>
</body>
</html>